﻿@using MalkiSumWeb.Controllers;
@model MalkiSumWeb.Models.Member
@{
    ViewBag.Title = "Profile";
    Layout = "~/Views/Shared/_LayoutUser.cshtml";
}
@if (Model == null)
{
    <text>
    <script>        window.location.href = '@Url.Action("LogOn", "Account")'; </script>
    </text>
}
else
{
    <text>
    <!-- content start -->
    <div class="container inner">
        <div class="row content settings">
            <div class="col-lg-12">
                <ul class="nav nav-tabs" id="settingsTab">
                    <li class="active"><a href="#general"><i class="fa fa-bars"></i>General</a></li>
                    <li><a href="#sharing"><i class="fa fa-globe"></i>Sharing</a></li>
                    <li><a href="#notifications"><i class="fa fa-info-circle"></i>Notifications</a></li>
                    <li><a href="#privacy"><i class="fa fa-lock"></i>Privacy</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="general">
                        <div class="profile">
                            <h3>
                                <i class="fa fa-picture-o"></i>Profile</h3>
                            <div class="img">
                                @if (MainController.myPersonalImageUrl != "")
                                {
                                    <img src="@Url.Content("~/Content/Users/" + MainController.myUserID + "/Profile/" + MainController.myPersonalImageUrl)" />
                                }
                                else
                                {
                                    if (MainController.myGender)
                                    {
                                    <img src="@Url.Content("~/Content/Users/mProfile.png")"/>
                                    }
                                    else
                                    {
                                    <img src="@Url.Content("~/Content/Users/fProfile.png")"/>
                                    }
                                }
                            </div>
                            <div class="col-sm-offset-0 col-sm-12">
                                <div class="info">
                                    <p>
                                        <span id="lblUsername">@Model.Username</span></p>
                                    <p>
                                        <span id="lblFirstName">@Model.FirstName</span> <span id="lblLastName">@Model.LastName</span>
                                    </p>
                                    <p>
                                        <span id="lblWebsite">@Model.Website</span></p>
                                    <p>
                                        @using (Html.BeginForm("SaveProfileImage", "Account", FormMethod.Post, new { id = "uploadForm", enctype = "multipart/form-data" }))
                                        { 
                                            @(Html.Telerik().Upload().Name("attachments")
                                        .ClientEvents(e => e.OnSelect("attachments_OnSelect")))
                                            <p class="note">
                                                Maximum combined file size: 10 MB
                                            </p>
                                       
                                            <button type="submit" class="btn btn-primary">
                                                Upload image</button>
                                                
                                            @ViewData["error"]
                                            <br />
                                            @ViewData["errorDetails"] 
                                        }
                                    </p>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <!-- normal form fileds start -->
                        <div class="form">
                            <h3>
                                <i class="fa fa-info-circle"></i>Personal Information</h3>
                            <form class="form-horizontal" role="form">
                            <div class="form-group has-success" style="display: none;">
                                <label class="control-label col-sm-2" for="inputFirstName">
                                    Account Type</label>
                                <div class="col-sm-5">
                                    <label class="control-label col-sm-2" for="inputFirstName">
                                        @Model.MemberStatu.NameEn</label>
                                </div>
                            </div>
                            <div class="form-group has-success">
                                <label class="control-label col-sm-2" for="inputFirstName">
                                    First Name</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" id="inputFirstName" value="@Model.FirstName">
                                </div>
                            </div>
                            <div class="form-group has-success">
                                <label class="control-label col-sm-2" for="inputLastName">
                                    Last Name</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" id="inputLastName" value="@Model.LastName">
                                </div>
                            </div>
                            <div class="form-group has-success">
                                <label class="control-label col-sm-2" for="inputUsername">
                                    User Name</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" id="inputUsername" value="@Model.Username" />
            <span id="invalid-username" style="display: none; color: Red;">Not a valid email
                address</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="inputAccType">
                                    Gender</label>
                                <div class="col-sm-5">
                                    <select class="form-control" id="inputGender">
                                        @if (Model.Gender != null && Model.Gender.HasValue && Model.Gender.Value)
                                        {
                                            <option value="1" selected="selected">Male</option>
                                            <option value="0">Female</option>
                                        }
                                        else
                                        {
                                            <option value="1">Male</option>
                                            <option value="0" selected="selected">Female</option>
                                        }
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-2" for="inputDB">
                                    Date of Birth</label>
                                <div class="col-sm-5">
                                    <div class="input-group">
                                        <input class="form-control inputDatePicker" id="inputDB" type="text" value="@(Model.BirthDate != null ? Model.BirthDate.Value.ToString("MM/dd/yyyy") : "")"><span
                                            class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group has-success">
                                <label class="control-label col-sm-2" for="inputLocation">
                                    Location</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" id="inputLocation" value="@Model.Location">
                                </div>
                            </div>
                            <div class="form-group has-success">
                                <label class="control-label col-sm-2" for="inputWebsite">
                                    Website</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" id="inputWebsite" value="@Model.Website" />
                                    <span id="invalid-website" style="display: none; color: Red;">Not a valid website</span>
                                </div>
                            </div>
                            <div class="form-group has-success">
                                <label class="control-label col-sm-2" for="inputTwitterID">
                                    Twitter ID</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" id="inputTwitterID" value="@Model.TwitterID">
                                </div>
                            </div>
                            <div class="form-group has-success">
                                <label class="control-label col-sm-2" for="inputFacebookID">
                                    Facebook ID</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" id="inputFacebookID" value="@Model.FacebookID">
                                </div>
                            </div>
                            <div class="form-group has-success">
                                <label class="control-label col-sm-2" for="inputBio">
                                    About me</label>
                                <div class="col-sm-5">
                                    <textarea id="inputBio" class="form-control">@Model.Bio</textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="button" class="btn btn-primary" onclick="SaveProfile()">
                                        Save Changes</button>
                                </div>
                            </div>
                            </form>
                        </div>
                        <!-- normal form fileds end -->
                        <!-- system messages start -->
                        <div class="alert alert-success alert-dismissable" id="dvSucess" style="display: none;">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                                &times;</button>
                            <strong><i class="fa fa-check-circle"></i>Success!</strong> Date has been saved.
                        </div>
                        <div class="alert alert-danger alert-dismissable" id="dvError" style="display: none;">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                                &times;</button>
                            <strong><i class="fa fa-times-circle"></i>Error!</strong> <span id="lblError"></span>
                        </div>
                        <!-- system messages end -->
                        <hr>
                    </div>
                    <div class="tab-pane" id="sharing">
                        Sharing</div>
                    <div class="tab-pane" id="notifications">
                        Notifications</div>
                    <div class="tab-pane" id="privacy">
                        Privacy</div>
                </div>
            </div>
        </div>
    </div>
    <!-- content end -->
    <script type="text/javascript">
     
      $(document).ready(function () {
        $(".t-upload-button span").text("Select a profile image");
        $(".t-upload-button").css("width",150);

    });
     function attachments_OnSelect(e) {
        setTimeout("changeRemoveButton()", 100);
    }

    function changeRemoveButton() {
        $(".t-upload-action").html("<span class='t-icon t-delete'></span> Delete");
    }

        function SaveProfile() {
            var txtFirstName = $("#inputFirstName").val();
            var txtLastName = $("#inputLastName").val();
            var txtUsername = $("#inputUsername").val();
            var gender = $("#inputGender").val();
            var txtDB = $("#inputDB").val();
            var txtLocation = $("#inputLocation").val();
            var txtWebsite = $("#inputWebsite").val();
            var txtBio = $("#inputBio").val();
            var txtTwitterID = $("#inputTwitterID").val();
            var txtFacebookID = $("#inputFacebookID").val();
            

            $.post('@Url.Action("SaveProfile", "Account")', {UserID: @Model.ID, FirstName: txtFirstName, LastName: txtLastName, Username: txtUsername,
                Gender: gender, BirthDate: txtDB, Location: txtLocation, Website: txtWebsite, Bio: txtBio, TwitterID: txtTwitterID, FacebookID: txtFacebookID
            }, function (ret) {
                if (ret.success) {
                    $("#lblUserName").text(ret.UserName);
                    $("#lblFirstName").text(ret.FirstName);
                    $("#lblLastName").text(ret.LastName);
                    $("#lblWebsite").text(ret.Website);

                    $("#lblFirstNameMain").text(ret.FirstName);
                    $("#lblLastNameMain").text(ret.LastName);

                    $("#dvSucess").show("slow");
                    $("#dvError").hide("slow");
                    //window.location.href = '@Url.Action("Profile", "Account")';
                }
                else {
                    $("#lblError").text(ret.msg);
                    $("#dvError").show("slow");  
                    $("#dvSucess").hide("slow");                  
                }
            });
        }

    </script>
    </text>
}
<script type="text/javascript">
    function like(fileID, li) {
        $.post('@Url.Action("like", "files")', { id: fileID }, function (ret) {
            if (ret.success) {
                //window.location.href = '@Url.Action("Index", "Home")';
                //window.location.href = '@Url.Action("Profile", "Account")';
                $(li).css("background", "#53bc87");
                $(li).css("color", "#fff");
                $(li).attr("onclick", "unlike(" + fileID + ",this)");
                alert("Like done.");
            }
            else {
                alert(ret.msg);
            }
        });
    }

    function unlike(fileID, li) {
        $.post('@Url.Action("unlike", "files")', { id: fileID }, function (ret) {
            if (ret.success) {
                //window.location.href = '@Url.Action("Index", "Home")';
                //window.location.href = '@Url.Action("Profile", "Account")';
                $(li).css("background", "#F9F9F9");
                $(li).css("color", "#595959");
                $(li).attr("onclick", "like(" + fileID + ",this)");
                alert("Unlike done.");
            }
            else {
                alert(ret.msg);
            }
        });
    }

    function AddToFavourites(fileID, li) {
        $.post('@Url.Action("AddToFavourites", "files")', { id: fileID }, function (ret) {
            if (ret.success) {
                //window.location.href = '@Url.Action("Index", "Home")';
                //window.location.href = '@Url.Action("Profile", "Account")';
                $(li).css("background", "#53bc87");
                $(li).css("color", "#fff");
                $(li).attr("onclick", "RemoveFromFavourites(" + fileID + ",this)");
                alert("Add To Favourites done.");
            }
            else {
                alert(ret.msg);
            }
        });
    }

    function RemoveFromFavourites(fileID, li) {
        $.post('@Url.Action("RemoveFromFavourites", "files")', { id: fileID }, function (ret) {
            if (ret.success) {
                //window.location.href = '@Url.Action("Index", "Home")';
                //window.location.href = '@Url.Action("Profile", "Account")';
                $(li).css("background", "#F9F9F9");
                $(li).css("color", "#595959");
                $(li).attr("onclick", "AddToFavourites(" + fileID + ",this)");
                alert("Remove from favourites done.");
            }
            else {
                alert(ret.msg);
            }
        });
    }


    $('#inputUsername').blur(function () {
        var email = $(this).val();
        var re = /^(([^<>()[\]\\.,;:\s@@\"]+(\.[^<>()[\]\\.,;:\s@@\"]+)*)|(\".+\"))@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/igm;
        if (re.test(email)) {
            $('#invalid-username').hide();
        } else {
            $('#invalid-username').show();
        }
    });

    $('#inputWebsite').blur(function () {
        var email = $(this).val();
        var re = /^(([^<>()[\]\\.,;:\s@@\"]+(\.[^<>()[\]\\.,;:\s@@\"]+)*)|(\".+\"))((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/igm;
        if (re.test(email)) {
            $('#invalid-website').hide();
        } else {
            $('#invalid-website').show();
        }
    });

</script>
